<template>
  <div class="page">
    <el-pagination
      @size-change="SizeChange"
      @current-change="pagesize"
      @prev-click="prevpage"
      @next-click="nextpage"
      background
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class extends Vue {
  @Prop({}) count!: number;
  @Prop({}) fetch!: Function;
  public size = 10; // 每页数量
  public offset = 0; // 从第一页开始

  private SizeChange(e: number) {
    // 拿到每页的页码
    this.size = e;
  }

  private nextpage() {
    //下一页
    this.offset = this.offset + 1;
    if (this.offset * this.size > this.count) {
      this.offset = this.offset - 1;
    }
    this.fetch(this.size, this.offset);
  }

  private prevpage() {
    //上一页
    this.offset = this.offset - 1;
    if (this.offset < 0) {
      this.offset = 0;
    }
    this.fetch(this.size, this.offset);
  }

  private pagesize(e: number) {
    // 选择页码分页
    this.offset = e - 1;
    this.fetch(this.size, this.offset);
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0px;
}
</style>
